<template>
    <div>
        <!-- <Notify.Component></Notify.Component> -->
        <!-- 返回图标 -->
        <div class="txhz">
            <div @click="hhxx" style="width: 50px">
                <!-- <router-link to="/home">  </router-link> -->
                <van-icon name="share" class="fhtb" />
                <br />
                <span class="fanhui">返回</span>
            </div>
            <!-- 收藏 -->
            <div style="width: 50px" class="yf" @click="shouchang">
                <!-- <router-link to="/home">  </router-link> -->
                <van-icon :name="sj.shouchang?'star':'star-o'" class="fhtb" />
                <br />
                <span class="fanhui">收藏</span>
            </div>
        </div>
        <!-- 取消收藏消息通知 -->
        <van-notify v-model="show3" type="warning" style="height: 46px">
            <van-icon name="passed" style="margin-right: 4px" />
            <span>已取消收藏</span>
        </van-notify>
        <!-- 单词部分 -->
        <div>
            <!-- 单词 -->
            <h1 class="jz">
                {{ sj.danci }}
            </h1>
            <!-- 发音按钮 -->
            <p class="jz2" @click="faying">
                [{{ sj.yinbiao }}]
                <van-icon name="volume-o" />
            </p>
        </div>
        <!-- 释义部分 -->
        <div class="bk">
            <p class="jz3" v-if="qh" @click="cksy">点击查看释义</p>
            <div v-else>
                <p class="jc">Web专属释义:{{ sj.dcfy }}</p>
                <p class="nr">
                    <!-- 释义 -->
                    {{ sj.shiyi }}
                </p>
            </div>
        </div>
        <!-- 音频，接口采用有道词典 http://dict.youdao.com/dictvoice?audio=   -->
        <div>
            <audio controls="controls" hidden="true" preload ref="audio">
                <!-- src动态绑定 -->
                <!-- 'http://dict.youdao.com/dictvoice?audio='+sj.danci -->
                <source :src="'http://dict.youdao.com/dictvoice?audio=' + sj.danci" type="audio/mp3" />
                <source src="song.ogg" type="audio/ogg" />
            </audio>
        </div>
        <!-- 上一个、收藏、下一个 -->
        <div class="xxia">
            <van-row>
                <van-col span="8" @click="shangyige">
                    <van-button type="info" block square>上一个</van-button>
                </van-col>
                <van-col span="8">
                    <van-button type="primary" block square @click="yzw">已掌握</van-button>
                    <!-- 已掌握消息通知 -->
                    <van-notify v-model="show" type="success" style="height: 46px">
                        <van-icon name="good-job-o" style="margin-right: 4px" />
                        <span>已掌握</span>
                    </van-notify>
                </van-col>

                <van-col span="8">
                    <van-button color="#7232dd" block square @click="xyg">下一个</van-button>
                </van-col>
            </van-row>
        </div>
        <!-- 已收藏消息通知 -->
        <van-notify v-model="show2" type="primary" style="height: 46px">
            <van-icon name="passed" style="margin-right: 4px" />
            <span>收藏成功</span>
        </van-notify>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    // 开始学习后端获取的数据,格式如下
    /*  dc: {
       sj1: {
         id: 1,
         // 单词
         danci: 'background',
         // 英标
         yinbiao: 'bækɡraʊnd',
         // 单词翻译
         dcfy: '背景',
         // 释义
         shiyi: '在一个div元素中的背景进行相关设置（背景图像、背景定位等）。',
  
       },
       sj2: {
         id: 2,
         danci: 'overflow',
         yinbiao: 'əʊvəˈfləʊ',
         dcfy: '内容溢出',
         shiyi: '控制内容溢出元素框时在对应的元素区间内添加滚动条。',
       },
       sj3: {
         id: 3,
         danci: 'typeof',
         yinbiao: 'taɪptaɪp',
         dcfy: '检测变量',
         shiyi: '操作符返回一个字符串，表示未经计算的操作数的类型。',
       },
     }, */
    //  前端发送数据
    /*  已掌握请求:id (发送成功需要返回true,发送失败返回一个flase)
     收藏请求:id (发送成功需要返回true,发送失败返回一个flase)*/
    data() {
        return {

            // v-if查看释义绑定
            qh: true,
            // 单词数据渲染
            sj: {
                id: 1,
                // 单词
                danci: "beforeCreate",
                // 英标
                yinbiao: "bækɡraʊnd",
                // 单词翻译
                dcfy: "实例创建前",
                // 释义
                shiyi: "实例创建前：这个阶段实例的data、methods是读不到的",
            },
            // 后端获取的数据
            /*   dc: [
              {
                id: 1,
                // 单词
                danci: "beforeCreate",
                // 英标
                yinbiao: "bækɡraʊnd",
                // 单词翻译
                dcfy: "实例创建前",
                // 释义
                shiyi: "实例创建前：这个阶段实例的data、methods是读不到的",
              },
              {
                id: 2,
                // 单词
                danci: "created ",
                // 英标
                yinbiao: "bækɡraʊnd",
                // 单词翻译
                dcfy: "created 实例创建后",
                // 释义
                shiyi: `这个阶段已经完成了数据观测，属性和方法的运算，watch/event事件回调。
      
      mount挂载阶段还没开始，$el属性目前不可见，数据并没有在DOM元素上进行渲染`,
              },
              {
                id: 1,
                // 单词
                danci: "beforeMount",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "beforeMount挂载前",
                // 释义
                shiyi: `在挂载开始之前被调用：相关的render函数首次被调用`,
              },
      
              {
                id: 1,
                // 单词
                danci: "mounted",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "mounted挂载前",
                // 释义
                shiyi: `   el选项的DOM节点，被新创建的vm.$el替换，并挂载到实例上去之后调用此生命函数。
      
                此时实例的数据在DOM节点上进行渲染`,
              },
      
              {
                id: 1,
                // 单词
                danci: "beforeUpdate",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "beforeUpdate更新前",
                // 释义
                shiyi: `数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命周期里进行状态处理`,
              },
      
              {
                id: 1,
                // 单词
                danci: "update",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "update更新后",
                // 释义
                shiyi: `这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件DOM已经更新，所以选择可以指向依赖DOM的操作。当实例每次进行数据更新时updated都会执行。`,
              },
      
              {
                id: 1,
                // 单词
                danci: "beforeDestory",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "beforeDestory销毁前",
                // 释义
                shiyi: `实例销毁之前调用`,
              },
      
              {
                id: 1,
                // 单词
                danci: "destroyed",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "destroyed销毁后",
                // 释义
                shiyi: `Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除，所有的子实例也会被销毁`,
              },
      
              {
                id: 1,
                // 单词
                danci: "beforeEach",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "路由守卫",
                // 释义
                shiyi: `router.beforeEach((to, from, next)
                全局前置路由守卫，初始化和每次切换路由都会调用的函数`,
              },
      
              {
                id: 1,
                // 单词
                danci: "defineProprety",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "数据劫持",
                // 释义
                shiyi: `双向数据绑定核心方法：Object.defineProprety来实现对属性的劫持，达到监听数据的目的`,
              },
      
              {
                id: 1,
                // 单词
                danci: "state",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "vuex储存数据",
                // 释义
                shiyi: `state 为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等， 只有在这里定义了，在 vue.js 的组件中才能获取你定义的这个对象的状态 `,
              },
      
              {
                id: 1,
                // 单词
                danci: "",
                // 英标
                yinbiao: "",
                // 单词翻译
                dcfy: "",
                // 释义
                shiyi: ``,
              },
            ], */
            show: false,
            show2: false,
            show3: false,
            // 用于切换单词
            num: 1,
            // 把传进来的对象进行数组封装，储存到arr里
            arr: [],
            // 单词本id
            dancibenId: 0,
        };
    },
    computed: {
        ...mapState(["ksxxsj", "wdsc"]),
    },

    methods: {
        ...mapMutations(["ksssa", "scdanci"]),

        hhxx() {
            this.$router.go(-1);
        },
        // 切换查看释义
        cksy() {
            this.qh = !this.qh;
        },
        // 点击发音
        faying() {
            let url = "http://dict.youdao.com/dictvoice?audio=" + this.sj.danci;
            this.$refs.audio.src = url;
            this.$refs.audio.play();
        },
        // 点击已掌握
        yzw() {
            console.log(888);
            // 发送已掌握请求
            // 占位符
            this.show = true;
            setTimeout(() => {
                this.show = false;
            }, 2000);
        },
        // 点击是否收藏
        shouchang() {

            // 控制收藏图标的行内样式
            this.sj.shouchang = !this.sj.shouchang
            console.log(this.sj, '更新this.sj状态')
            // 导入单词数据和单词本id
            this.scdanci([this.sj, this.dancibenId])
           

        },
        // 把路由传来的id储存
        lycc() {
            let id = this.$route.query.id;
            this.ksssa(id);
            this.dancibenId = id

        },
        // 点击上一个
        shangyige() {
            if (this.num >= 2) {
                this.num -= 1;

                this.sj = this.arr[this.num - 1];
                console.log(this.sj, "sj");

                // 关闭释义
                this.qh = true;
            } else {
                this.$toast.fail("这是第一个");
            }
        },
        // 点击下一个
        xyg() {
            // this.sj = this.dc

            if (this.arr.length <= this.num) {
                // 最后一个触发弹窗
                this.$toast.success("学完啦");
                return;
            } else {
                this.sj = this.arr[this.num];
                this.num += 1;
                // 关闭释义
                this.qh = true;
                console.log(this.num);
            }
        },
        // 处理获取的数据,装进一个数组里
        arrcl() {
            // 该数据为前后端，
            // for (let key in this.dc) {
            //   this.arr.push(this.dc[key]);
            // }
            // 该数据为离线版
            for (let key in this.ksxxsj) {
                this.arr.push(this.ksxxsj[key]);
            }
            console.log(this.ksxxsj, "2222222222222");
            this.sj = this.arr[0];
        },

    },
    created() {
        this.lycc();
        this.arrcl();

    },
};

</script>

<style lang="less" scoped>
.fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: rgb(16, 168, 238);
    font-size: 38px;
    transform: rotateY(180deg);
}

.fanhui {
    color: black;
    font-weight: 700;
    margin-left: 10px;
}

.jz {
    margin-top: 70px;
    text-align: center;
}

.jz2 {
    margin-top: 20px;
    text-align: center;
}

.bk {
    border: 1px solid rgb(240, 240, 240);
    height: 230px;
    overflow: scroll;
}

.jz3 {
    text-align: center;
    line-height: 120px;
    margin-top: 55px;
    font-weight: 700;
    font-size: 25px;
    color: rgb(39, 197, 245);
}

.jc {
    font-weight: 700;
}

.nr {
    margin: 0px 20px;
    text-indent: 2em;
    word-wrap: break-word;
}

.ycmp3 {
    display: none;
}

.xxia {
    width: 100%;
    position: absolute;
    bottom: 50px;
}

.txhz {
    display: flex;
    justify-content: space-between;
}
</style>